
@charset "utf-8"

// $cascader-active-color: $primary !default

.cascader
    height: auto
    &.input:active
        box-shadow: none
    .drop-icon
        position: absolute
        height: 100%
        right: 5px
        top: 0
        text-align: center
        color: #c0c4cc

    .cascader-tags
        flex-grow: 1
        align-content: flex-start
        display: flex
        flex-wrap: wrap
        height: auto
        position: relative
        max-width: 95%
        overflow: hidden
        
        .tag
            margin: 0.1rem
            font-size: inherit
            height: auto

    .placeholder
        color: #c0c4cc
        background-color: unset
        padding-left: 0
    .tag-label
        background-color: unset
        padding-left: 0
        max-width: 100%
        justify-content: flex-start
   
    .cascader-dropdown
        white-space: nowrap
        background: #fff
        border: 1px solid #e4e7ed
        border-right: 0
        border-radius: 2px
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
        position: absolute !important
        left: 0
        top: 100%
        margin-top: 8px
        z-index: 2

        ul.cascader-item
            display: inline-block
            vertical-align: top
            height: 205px
            overflow: auto
            border-right: 1px solid #e4e7ed
            background-color: #fff
            box-sizing: border-box
            margin: 0
            padding: 6px 0
            min-width: 180px

            >li
                font-size: 1em
                padding: 6px 10px 6px 15px
                position: relative
                white-space: nowrap
                overflow: hidden
                text-overflow: ellipsis
                color: #606266
                line-height: 1.2em
                box-sizing: border-box
                cursor: pointer
                outline: none
                display: flex
                align-items: center
                &.is-disabled
                    color: #c0c4cc
                    cursor: not-allowed

                // &.active
                //     color: $cascader-active-color
                // .active
                //     color: $cascader-active-color
                &:hover
                    background-color: $light
                >i
                    float: right

                input
                    margin-right: 10px

                span.cascader-label
                    white-space: nowrap
                    overflow: hidden
                    text-overflow: ellipsis
                    flex-grow: 1

            &:first-of-type:after
                content: ""
                position: absolute
                top: -5px
                left: 35px
                z-index: -1
                display: inline-block
                width: 10px
                height: 10px
                background-color: #fff
                transform: rotate(45deg)
                border: 1px solid #e4e7ed

@each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    .cascader.is-#{$name} .cascader-item>li.active,
    .cascader.is-#{$name} .cascader-item>li .active,
        color: $color